@extends('layout.app')

@section('title', 'Form Event')

{{--@section('sidebar')
    @parent
    <p>this text is append to sidebar</p>
@endsection--}}

@section('content')
<div class="container">
    <div class="card d-flex mt-3">
        <div class="card-header m-lg-0">
            <div class="card-title">Iteration</div>
        </div>
        <div class="card-body" id="element-customize">
        @verbatim
            <div class="border-bottom border-info form-group">
                <base-checkbox v-model="loginVue"></base-checkbox>
                <p class="text-warning m-0">Your value is:</p>
                <p class="text-success m-0">{{loginVue}}</p>
            </div>
            <div class="border-bottom border-info form-group">
                <p class="text-warning m-0">Your value is:</p>
                <p class="text-success m-0">{{loginVue ??'' }}</p>
            </div>
        @endverbatim
        </div>
    </div>
</div>
@verbatim
<script>
    Vue.component('base-checkbox', {
        model: {
            prop: 'checked',
            event: 'change'
        },
        props: {
            checked: Boolean
        },
        template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
    });

    new Vue({
        el: "#element-customize",
        data: {
            loginVue: false
        }
    })
</script>
@endverbatim
@endsection


